<template>
  <el-card class="author-footer">
    <div class="footer-content">
      <!-- 作者信息 -->
      <div class="author-info">
        <el-avatar :src="author.avatar || defaultAvatar" :size="80" shape="circle"></el-avatar>
        <div class="text-info">
          <h3 class="name">{{ author.name }}</h3>
          <p class="bio">{{ author.bio || '暂无简介' }}</p>
        </div>
      </div>

      <!-- 联系方式 -->
      <el-divider></el-divider>
      <div class="contact-info">
        <h4>联系方式</h4>
        <ul>
          <li v-for="(link, index) in author.socialLinks" :key="index">
            <el-link :href="link.url" target="_blank" type="primary">
              <i :class="getSocialIcon(link.type)"></i>
              {{ link.type }}
            </el-link>
          </li>
        </ul>
      </div>

      <!-- 版权信息 -->
      <el-divider></el-divider>
      <div class="copyright">
        <p>&copy; {{ currentYear }} {{ author.name }}. 保留所有权利。</p>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, computed } from 'vue';

// 默认作者数据
const author = ref({
  name: '博客作者',
  bio: '这是一个个人技术博客，分享编程知识和项目经验。',
  avatar: null,
  socialLinks: [
    { type: 'github', url: 'https://github.com/' },
    { type: 'linkedin', url: 'https://www.linkedin.com/' },
    { type: 'email', url: 'mailto:example@example.com' }
  ]
});

const defaultAvatar = 'https://myblog-1472580369.oss-cn-beijing.aliyuncs.com/images/2025/07/911bd591-59ee-4f5e-8f4c-1d230b6d4fe3.jpg';
const currentYear = computed(() => new Date().getFullYear());

const getSocialIcon = (type) => {
  switch(type) {
    case 'github': return 'fab fa-github';
    case 'linkedin': return 'fab fa-linkedin';
    case 'twitter': return 'fab fa-twitter';
    case 'weibo': return 'fab fa-weibo';
    case 'zhihu': return 'fas fa-book-open';
    case 'email': return 'fas fa-envelope';
    default: return 'fas fa-external-link-alt';
  }
};
</script>

<style scoped>
.author-footer {
  margin-top: 2rem;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.text-info {
  display: flex;
  flex-direction: column;
}

.name {
  margin: 0;
  font-size: 1.25rem;
  color: #333;
}

.bio {
  margin: 0.25rem 0 0 0;
  color: #666;
  font-size: 0.9rem;
}

.contact-info h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: #555;
}

.contact-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contact-info li {
  margin: 0;
}

.copyright p {
  margin: 0;
  color: #888;
  font-size: 0.85rem;
}
</style>